<template>
  <div class="orderlist">
    <div class="tab_container">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="用户名">
                <span>{{ props.row.user_id }}</span>
              </el-form-item>
              <el-form-item label="收货地址">
                <span>{{ props.row.address_id }}</span>
              </el-form-item>
              <el-form-item label="评分">
                <span>{{ props.row.unique_id }}</span>
              </el-form-item>
              <el-form-item label="店铺名称">
                <span>{{ props.row.restaurant_name }}</span>
              </el-form-item>
              <el-form-item label="店铺 ID">
                <span>{{ props.row.restaurant_id }}</span>
              </el-form-item>
              <el-form-item label="店铺地址">
                <span>{{ props.row.restaurant_type }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>

        <el-table-column label="订单ID" width="400">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.id }}</span>
          </template>
        </el-table-column>

        <el-table-column label="总价格" width="400">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.score }}</span>
          </template>
        </el-table-column>

        <el-table-column label="订单状态">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.status }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="Paination" style="margin-top:10px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5,10,15,20]"
        :page-size="limit"
        backgroud
        layout="total, sizes, prev, pager, next,jumper"
        :total="count"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
// import headTop from '../components/headerTop.vue'
import {getOrderCount, getOrderList} from '../api/getDate1'
import Vue from 'vue'
import VueResource from 'vue-resource'
Vue.use(VueResource)
Vue.http.options.emulateJSON = true
export default {
  name: 'orderlist',
  data () {
    return {
      tableData: [],
      limit: 5,
      count: 0,
      currentPage: 1,
      offset: 0
    }
  },
  created () {
      this.initData()
  },
  methods: {
    async initData () {
      try {
        const countData = await getOrderCount()
        if (countData.status === 1) {
          this.count = countData.count
          console.log(countData)
        } else {
          throw new Error('获取数据失败')
        }
        this.getOrders()
      } catch (error) {
        console.log('获取数据失败', error)
      }
    },
    // 显示首页面的的数据
    async getOrders () {
      const Order = await getOrderList({offset: this.offset, limit: this.limit})
      this.tableData = []
      Order.order.forEach(item => {
        const tableData = {}
        // eslint-disable-next-line no-sequences
        tableData.id = item.id,
        tableData.score = item.score,
        tableData.status = item.status,
        tableData.user_id = item.user_id,
        tableData.address_id = item.address_id,
        tableData.unique_id = item.unique_id,
        tableData.restaurant_name = item.restaurant_name,
        tableData.restaurant_id = item.restaurant_id,
        tableData.restaurant_type = item.restaurant_type,
        this.tableData.push(tableData)
      })
    },
    handleSizeChange (val) {
      this.limit = val // 获取你选择的每一页所选择的条数 赋给pageSize
      this.offset = (this.currentPage - 1) * this.limit
      this.getOrders()
    },
    handleCurrentChange (val) {
      this.currentPage = val// 获取你选择的每一页所选择的条数 赋给pageSize
      this.offset = (val - 1) * this.limit
      this.getOrders()
    }
  }
}
</script>

<style scoped>
</style>
